<script setup lang="ts"></script>

<template>
  <div class="footer">
    <img
      src="@/assets/images/index/footer_banner.png"
      alt="@/assets/images/index/footer_banner.png"
      class="img"
    />
    <div class="box">
      <img
        src="@/assets/images/index/footer_logo.png"
        alt="@/assets/images/index/footer_logo.png"
        class="logo"
      />
      <div class="text">
        <span>隐私协议</span>
        <span>使用条款</span>
      </div>
      <div class="copyright">
        Copyright © 2021 上海客来易科技有限公司 沪ICP备1888888号-1 沪公网安备 500000000号
      </div>
      <div class="qrcode-box">
        <img
          src="@/assets/images/index/footer_qrcode.png"
          alt="@/assets/images/index/footer_qrcode.png"
          class="img"
        />
        <div class="text">扫码关注</div>
      </div>
    </div>
    <el-button type="primary" class="header-right-btn common">免费试用</el-button>
    <el-button type="info" class="call common">联系我们</el-button>
  </div>
</template>

<style scoped lang="scss">
.common {
  width: 160px;
  height: 48px;
  border-radius: 24px;
  position: absolute;
  font-size: 16px;
}
.call {
  color: #000;
  background: #fff;
  left: 691px;
  bottom: 329px;
}
.header-right-btn {
  background: #0071e3;
  right: 703px;
  top: 189px;
}
.footer {
  width: 1366px;
  position: relative;

  > .img {
    width: 1366px;
    height: 322px;
  }

  > .box {
    width: 1366px;
    height: 241px;
    background: #ffffff;
    position: relative;
    border: 0px solid #000;

    > .logo {
      width: 120px;
      height: 39px;
      position: absolute;
      top: 60px;
      left: 83px;
    }

    > .text {
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #353535;
      line-height: 17px;
      position: absolute;
      top: 131px;
      left: 83px;

      > span {
        margin-right: 40px;
      }
    }

    > .copyright {
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #99a2aa;
      line-height: 17px;
      position: absolute;
      top: 164px;
      left: 83px;
    }

    > .qrcode-box {
      //   width: 88px;
      position: absolute;
      top: 60px;
      right: 83px;
      text-align: center;

      > .img {
        width: 88px;
        height: 88px;
      }

      > .text {
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #353535;
        line-height: 17px;
        margin-top: 16px;
      }
    }
  }
}
</style>
